<template>
  <el-cascader
    :value="currentValue"
    expand-trigger="hover"
    :options="regionData"
    @change="handleChange"
  >
  </el-cascader>
</template>

<script>
  const BEIJING = ['110000', '110100', '110101']
  export default {
    props: {
      value: {
        type: Array,
        default: BEIJING
      },
      simple: {
        type: Boolean,
        default: false
      },
      city: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        regionData: [],
        originData: []
      }
    },
    computed: {
      currentValue() {
        return this.value.map(item => item.toString())
      },
      cacheKey() {
        return this.simple ? 'REGION_SIMPLE' : 'REGION'
      }
    },
    methods: {
      getName() {
        const nameArr = this.currentValue.map(item => this.findRegionName(item))
        return nameArr.join('')
      },
      findRegionName(value) {
        const target = this.originData.find(item => item.value === value)
        return target ? target.name : ''
      },
      handleChange(values) {
        this.$emit('change', values, this.regionData)
        this.$emit('update:value', values)
      },
      getLocalRegion() {
        try {
          const regionStr = localStorage.getItem(this.cacheKey)
          return JSON.parse(regionStr)
        } catch (e) {
          return null
        }
      },
      getLocalRegionOrigin() {
        try {
          const regionStr = localStorage.getItem('REGION_ORIGIN')
          return JSON.parse(regionStr)
        } catch (e) {
          return null
        }
      },
      async fetchData() {
        if (!this.getLocalRegion()) {
          const { data } = await this.$http({
            url: this.simple ? '/api/board/v1/region/simple' : '/api/activity/v1/region'
          }, false)
          this.originData = this.simple ? data : data.list
          this.regionData = this.prepareData(this.originData)
          localStorage.setItem('REGION_ORIGIN', JSON.stringify(this.originData))
          localStorage.setItem(this.cacheKey, JSON.stringify(this.regionData))
        } else {
          this.originData = this.getLocalRegionOrigin()
          this.regionData = this.getLocalRegion()
        }
      },
      prepareData(originData) {
        const provinces = originData.filter(item => item.parent_id === 0)
        return provinces.map(item => {
          this.findChildren(item, originData)
          return item
        })
      },
      findChildren(item, originData) {
        item.label = item.name
        item.value = item.code
        const children = originData.filter(it => it.parent_id === item.id)
        if (children.length > 0) {
          item.children = children
          item.children.forEach(it => this.findChildren(it, originData))
        }
      },
      findName(code) {
        const target = this.originData.find(item => item.code === code)
        return target ? target.name : ''
      },
      region_name() {
        return this.value.map(item => this.findName(item)).join('')
      }
    },
    mounted() {
      this.fetchData()
    }
  }
</script>

<style>

</style>
